<template>
	<view class="facility-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content">
			<view>
				<view class="name">二维码编号：</view>
				<view class="val">{{deviceDetail.devicecode}}</view>
			</view>
			<view>
				<view class="name">设施名称：</view>
				<view class="val">{{deviceDetail.devicename}}</view>
			</view>
			<view>
				<view class="name">设施类型：</view>
				<view class="val">{{devicetype}}</view>
			</view>

			<!-- <view>
				<view class="name">处理工艺：</view>
				<view class="val">测试1</view>
			</view> -->
			<view>
				<view class="name">处理设计风量(m³/h)：</view>
				<view class="val">{{deviceDetail.designairvolume}}</view>
			</view>
			<view>
				<view class="name">设计使用量(kg)：</view>
				<view class="val">{{deviceDetail.designusenum}}</view>
			</view>
			<view>
				<view class="name">更换周期：</view>
				<view class="val">{{deviceDetail.recircledays}}天</view>
			</view>
			<view>
				<view class="name">环保管理员1：</view>
				<view class="val">{{hbperson}}</view>
			</view>
			<view>
				<view class="name">手机号：</view>
				<view class="val">{{hbmobile}}</view>
			</view>
			<view>
				<view class="name">环保管理员2：</view>
				<view class="val">{{hbpersonsecond}}</view>
			</view>
			<view>
				<view class="name">手机号：</view>
				<view class="val">{{hbmobilesecond}}</view>
			</view>
		</view>
		<view class="qr-code">
			<!-- <button @click="saveQrcode">保存二维码到本地</button> -->
			<canvas canvas-id="qrCode"></canvas>
			<text>编号：{{deviceDetail.devicecode}}</text>
		</view>
		<view class="btn-wrap">
			<button @click="del">{{deviceDetail.status==2?'启用设施':'停用设施'}}</button>
		</view>

	</view>
</template>

<script setup>
	import wxcode from 'uniapp-qrcode'
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import {
		onLoad,
		onReady,

	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue'
	let name = "设施详情"
	let deviceId = ref(0)
	let deviceDetail = ref({})
	let devicetype = ref('')

	let hbperson = uni.getStorageSync('hbperson')
	let hbmobile = uni.getStorageSync('hbmobile')
	let hbpersonsecond = uni.getStorageSync('hbpersonsecond')
	let hbmobilesecond = uni.getStorageSync('hbmobilesecond')

	onReady(() => {


		watch(() => deviceDetail.value.devicecode, () => {
			wxcode.qrcode('qrCode', deviceDetail.value.devicecode, 320, 320);
			// console.log(deviceDetail.value, 'deviceDetail.value.devicecode');
		})



	})
	let saveQrcode = () => {
		wx.canvasToTempFilePath({
			//传入canvas标签上定义的canvas-id,解析图片内容，供后续使用
			canvasId: 'qrCode',
			success: function(res) {

				uni.saveImageToPhotosAlbum({
					//传入解析后的图片数据，并在用户同意授权后将其保存到相册中
					filePath: res.tempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							duration: 2000,
							icon: "none"
						});
					}
				});
			}
		})


	}
	onLoad((e) => {


		let id = e.id
		deviceId.value = id
		getMsg()
		http({
			url: '/listitem/getmodule',
			data: {
				module: 'B03'
			}
		}).then((res) => {
			if (res.code == 0) {

				let data = res.data
				console.log(data, 'data');
				let result = data.find((item) => {
					return item.id == deviceDetail.value.devicetype
				})
				console.log(result, 'sre');
				devicetype.value = result.name
			}

		})

	})
	let getMsg = () => {
		http({
			url: "/device/detail",
			data: {
				id: deviceId.value
			}
		}).then((res) => {
			if (res.code == 0) {
				deviceDetail.value = res.data
			}

		})
	}
	let del = () => {
		console.log(deviceDetail.value.status, 'deviceDetail.status');
		let status = deviceDetail.value.status == 2 ? 1 : 2
		http({
			url: '/device/applyStopUse',
			data: {
				id: deviceId.value,
				status
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				})
				getMsg()
			}
			console.log(res, 'res');
		})
	}
</script>

<style lang="scss" scoped>
	.facility-detail {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;


		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.btn-wrap {
			padding: 65rpx 39rpx 54rpx 39rpx;

			button {
				width: 100%;

				height: 88rpx;
				background: #0874FA;
				border-radius: 44rpx;

				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
				line-height: 88rpx;
			}
		}

		.qr-code {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;


			button {
				width: 274rpx;
				height: 43rpx;
				background: #047AE1;
				border-radius: 7rpx;
				width: 183rpx;
				height: 22rpx;
				line-height: 22rpx;
				font-size: 23rpx;
				color: #FFFFFF;
				padding: 10rpx 45rpx 10rpx 45rpx;
				margin-top: 20rpx;
				box-sizing: content-box;
			}

			canvas {
				width: 300rpx;
				height: 300rpx;
				// border: 1px solid #313131;
				margin-top: 10rpx;
				margin-left: -22rpx;
			}

			text {

				font-weight: 500;
				font-size: 21rpx;
				color: #333333;
				margin-top: 18rpx;

			}
		}

		.content {
			padding-top: 20rpx;

			view {
				padding: 0 48rpx 0 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;

				.name {
					padding: 0;
					font-weight: 400;
					font-size: 31rpx;
					color: #333333;

				}

				.val {
					display: flex;
					font-weight: 400;
					font-size: 34rpx;
					color: #333333;

				}
			}
		}




	}
</style>